<template>
  <div class="wrap">
    <div class="close" v-if="isact" @click="closeCard"></div>
    <div class="btn_share" v-if="isact" @click="goShare">分享好友抽锦鲤大奖</div>
    <div class="bg">
      <div class="line"></div>
      <div class="tit"></div>
      <p class="tips" v-if="!isact">点击翻转卡片，可抽取现金红包</p>
    </div>
    <div class="con_card">
      <div class="card" :class="{ act: isact, move: ismove }">
        <div
          class="card_back"
          ref="card_back"
          :class="[`card${cardType}`]"
          @click="lottery(logId)"
        >
          <div class="car"></div>
        </div>
        <div class="card_front">
          <div class="result succ" v-show="status === 1">
            <p>{{ amount }}</p>
          </div>
          <div class="result sorry" v-show="status === 3"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Qs from "qs";
export default {
  name: "LotteryA",
  props: ["cardType", "logId", "id"],
  data() {
    return {
      amount: 0,
      isact: false,
      ismove: true,
      status: -1,
      isclick: false,
    };
  },

  methods: {
    lottery(logId) {
      if (this.isclick) return;
      this.isclick = true;
      this.$http({
        method: "post",
        url: `${this.$CONF.baseUrl}lottery.jsp`,
        data: {
          type: 1,
          logId: logId,
        },
      })
        .then((res) => {
          this.isclick = false;
          // status   1:succ,3:sorry; lottery()也是通过改变cstatus改变父组件fstatus
          let data = res.data;
          switch (data.code) {
            case -1:
              this.$router.replace("home");
              break;
            case 1:
              if (data.isAward === 1 && data.amount > 0) {
                this.status = 1;
                this.amount = data.amount;
              } else {
                this.status = 3;
              }
              this.isact = true;
              break;
            case -8:
              this.status = 3;
              this.isact = true;
              break;
            default:
              this.$toast(data.msg);
              break;
          }
        })
        .catch((err) => {
          this.isclick = false;
          this.$toast("网络不佳，请稍后重试");
          this.$router.replace("home");
        });
    },
    closeCard() {
      this.$emit("closeA");
    },
    // 跳分享页
    goShare() {
      this.$router.push({ path: `/share/${this.id}` });
    },
  },
  mounted() {
    let _this = this;
    setTimeout(() => {
      _this.ismove = false;
    }, 10);
  },
};
</script>

<style lang="scss">
.wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 1);
  z-index: 10;
  .close {
    z-index: 100;
    width: 0.6rem;
    height: 0.6rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(2.2rem, -4.8rem);
    background: url(../assets/images/page_close.png) no-repeat center/contain;
  }
  .btn_share {
    z-index: 100;
    width: 5rem;
    height: 0.77rem;
    background: url(../assets/images/btn_share2.png) no-repeat center top/contain;
    position: fixed;
    top: 50%;
    left: 50%;
    font-size: 0.33rem;
    text-indent: 0.2rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 0.77rem;
    transform: translate(-50%, 4.5rem);
  }
  .bg {
    width: 100%;
    height: 100%;
    z-index: 11;
    position: absolute;
    .tit {
      width: 4.96rem;
      height: 0.59rem;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -4.2rem);
      background: url(../assets/images/tit.png) no-repeat center/contain;
    }
    .line {
      width: 100%;
      height: 100%;
      position: fixed;
      background: url(../assets/images/line.png) center/contain no-repeat;
      animation: rotateIn 3.8s linear infinite;
    }

    .tips {
      font-size: 0.2rem;
      color: #fff;
      width: 100%;
      text-align: center;
      line-height: 1.1;
      position: fixed;
      top: 50%;
      transform: translateY(3.66rem);
    }
  }
  .con_card {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 800px;
    z-index: 12;
    .card {
      width: 4.91rem;
      height: 6.89rem;
      background: url(../assets/images/card_bg.png) no-repeat center top/contain;
      left: 50%;
      top: 50%;
      margin-left: -2.45rem;
      margin-top: -3.45rem;
      position: fixed;
      transition: 0.6s;
      transform-style: preserve-3d;
      box-shadow: 0 0 0.1rem #fff;
      border-radius: 0.25rem;
      transform: rotateY(0deg);
      &.move {
        width: 1.8rem;
        height: 2.5rem;
        margin-left: -0.9rem;
        margin-top: -1.25rem;
        transform: rotateY(360deg);
        .card_back::after {
          top: 10rem;
        }
      }
      &.act {
        transform: rotateY(180deg);
      }
      .card_back {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-tap-highlight-color: transparent;
        &.card1 {
          background: url(../assets/images/card_0.png) no-repeat center top/contain;
        }
        &.card2 {
          background: url(../assets/images/card_1.png) no-repeat center top/contain;
        }
        &.card3 {
          background: url(../assets/images/card_2.png) no-repeat center top/contain;
        }
        &.card4 {
          background: url(../assets/images/card_3.png) no-repeat center top/contain;
        }
        &::after {
          transition: 1.5s;
          width: 0.3rem;
          height: 200%;
          content: "";
          position: absolute;
          top: -13rem;
          left: 0;
          transform: rotate(135deg);
          background: rgba(255, 255, 255, 0.8);
          box-shadow: 0 0 0.5rem #fff;
        }
      }
      .card_front {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transform: rotateY(-180deg);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-tap-highlight-color: transparent;
        .result {
          width: 100%;
          height: 100%;
          &.succ {
            position: relative;
            background: url(../assets/images/succ.png) no-repeat 0 0 / contain;
            p {
              width: 2.8rem;
              height: 1rem;
              text-align: right;
              line-height: 1;
              font-size: 1rem;
              font-weight: 600;
              color: #38a6b9;
              position: absolute;
              top: 2.88rem;
              right: 1.53rem;
              letter-spacing: -2px;
            }
          }
          &.sorry {
            background: url(../assets/images/sorry.png) no-repeat 0 0 / contain;
          }
        }
      }
    }
  }
}
@keyframes rotateIn {
  0% {
    transform: rotate(0deg) scale(1.5);
  }
  100% {
    transform: rotate(360deg) scale(1.5);
  }
}
</style>
